<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:c="http://java.sun.com/jsp/jstl/core" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:pe="http://primefaces.org/ui/extensions">

    <body>
        <ui:composition template="./templates/all.xhtml">

            <ui:define name="title">
                Wfaces
            </ui:define>

            <ui:define name="top">
                <p:messages autoUpdate="true" showDetail="true" showSummary="true" />
            </ui:define>

            <ui:define name="left">
                left
            </ui:define>

            <ui:define name="right">
                right
            </ui:define>

            <ui:define name="content" id="con">
                <h:form prependId="true" id="f"> 
                    <pe:tooltip global="true" />

                    <p:poll interval="10" update="f" />

                    <p:tabView id="tabView" dynamic="true" cache="false"
                               orientation="left" style="width:700px; height: 530px; float: left"
                               onTabShow="scrollDown()" widgetVar="tabview">

                        <p:ajax event="tabChange" listener="#{chatMB.change}" />

                        <c:forEach items="#{chatMB.users}" var="u" >
                            <p:tab title="#{u.id}">
                                <f:facet name="title" class="tabHeader">
                                    <table>
                                        <tr>
                                            <td><img src="#{u.tof}" width="25" height="25" /></td>
                                            <td>#{u.firstname} #{u.lastname}</td>
                                        </tr>
                                    </table>
                                </f:facet>
                                <div class="discDiv">
                                    <table border="0">
                                        <c:forEach items="#{chatMB.discussions}" var="disc" >
                                            <tr>
                                                <td style="vertical-align: top; width:30px;">
                                                    <p:graphicImage  value="#{disc.user.tof}" width="25" height="25" />&nbsp;
                                                </td>
                                                <td style="vertical-align: top" title="#{disc.dt}">
                                                    #{disc.message}
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </table> 
                                </div>
                            </p:tab>
                        </c:forEach>
                        <p:tab title="Liste Complète"> 
                            <p:dataGrid style="height: 100%; width: 200px;" paginatorTemplate=" {PreviousPageLink} {NextPageLink} "
                                        var="user" value="#{chatMB.allUsers}" 
                                        columns="2" paginator="true" paginatorAlwaysVisible="false" 
                                        rows="14" paginatorPosition="bottom" emptyMessage="No Results !"
                                        >
                                <p:column>
                                    <table border="0" style="width:230px; height:45px;">
                                        <tr>
                                            <td rowspan="3">
                                                <p:commandLink oncomplete="tabview.select(0)" action="#{chatMB.select(user)}" update=":f" >
                                                    <p:graphicImage value="#{user.tof}" width="50px" height="50px" />
                                                </p:commandLink>
                                            </td>
                                            <td>
                                                <p:commandLink action="#{chatMB.select(user)}" oncomplete="tabview.select(0)" update=":f" value="#{user.firstname} #{user.lastname}">
                                                </p:commandLink>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputText value="#{user.city}, #{user.country}" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                                <h:outputText value="#{user.age} ans" />
                                            </td>
                                        </tr>
                                    </table>
                                </p:column>
                            </p:dataGrid>
                        </p:tab>
                    </p:tabView>
                    <br/>
                    <br/>
                    <br/>
                    <br/>
                </h:form>
                <h:form>
                    <p:inputTextarea autoResize="false" style="float:left; width: 500px;" value="#{chatMB.message}" />
                    <p:commandButton style="float:left; margin-left: 10px;
                                     width:190px; height:58px;"
                                     update=":f" value="Send"
                                     action="#{chatMB.send}"
                                     oncomplete="scrollDown()"/>
                    <p:ajaxStatus style="float:left">
                        <f:facet name="start">
                            <h:graphicImage height="25" width="25" value="images/ajax-loader.gif" />  
                        </f:facet>
                        <f:facet name="complete">
                            <h:outputText value=""/>
                        </f:facet>
                    </p:ajaxStatus>
                    <div style="clear: both" />
                </h:form>
            </ui:define>

            <ui:define name="bottom">
                bottom
            </ui:define>

        </ui:composition>
    </body>
</html>
